<template>
	<div class='cont'>
		<view class="content">
			<view class="cu-bar mySearch">
				<view class="search-form round" style="margin: 0;padding: 0;">
					<input v-model="searchVal" type="text" placeholder=" 搜索" placeholder-style="text-align:center" placeholder-class='cuIcon-search'
					 style="text-align: center;" />
				</view>
			</view>
			<div style="height: 80rpx;"></div>
			<div class='list'>
				<div class='listItem' v-for='(item,index) in listData' :key='index' @click='toNext(item)'>
					<video :src="item.url" alt="" class='coverImg'></video>
					<div class='name'>{{item.name}}</div>
					<div class='num'>{{item.read_num+item.read_num_supplement}}次播放</div>
				</div>
				<i></i>
				<i></i>
				<i></i>
				<i></i>
				<i></i>
				<i></i>
			</div>
			<div style='height: 100rpx;'></div>
		</view>
		<!-- <TabBar></TabBar> -->
	</div>
</template>

<script>
	// import TabBar from '@/components/TabBar.vue'
	export default {
		data() {
			return {
				dotStyle: false,
				searchVal: '',
				listData: [],
				page_index:1,
				page_num:12,
				count:0

			};
		},
		components: {
			// TabBar,
		},
		onLoad() {},

		onShow() {
			//console.log('video执行了onShow');
			// 生产
			// uni.setStorageSync('token', 'f239d0d31b934bfc915cd60bafda92cd');
			
		},
		watch: {
			searchVal(val) {
				//console.log('val==', val)
				this.page_index=1
				this.listData=[]
				this.getData()
			},
		},
		mounted() {
			//console.log('video执行了mounted');
			// uni.setStorageSync('token', 'f239d0d31b934bfc915cd60bafda92cd');
			// this.getNews()
			this.page_index=1
			this.page_num=12
			this.listData=[]
			this.count=0
			this.getData()
		},
		onHide() {
			//console.log('video执行了onHide');
		},
		beforeDestroy() {
			//console.log('video执行了beforeDestroy');
		},

		methods: {
			getMore(){
				//console.log(this.count/this.page_index)
				if (this.count/this.page_index>this.page_num) {
					this.page_index++;
					this.getData();
					//console.log('加载更多');
				} else {
					//console.log('没有更多了');
				}
			},
			getData() {
				let _this = this;
				_this.uniRequest({
					url: `/video/home_page`,
					method: 'post',
					data:{
						name:_this.searchVal,
						page_index:_this.page_index,
						page_num:_this.page_num
					},
					success: res => {
						//console.log('返回值', res);
						if (res.code == 200) {
							this.listData = this.listData.concat(res.data.videos) ;
							this.count=res.data.count||0
						}
					},
					fail: err => {
						//console.log('request fail错误', err);
					}
				});
			},
			toNext(item) {
				//console.log('toNext==', item)
				uni.navigateTo({
					url: `/pages/video/details?id=${item.id}`
				});
			}
		}
	};
</script>

<style lang="less" scoped>
	// .cont {
	// 	margin: 0;
	// 	padding: 0;
	// 	background-color: white;
	// 	width: 100vw;
	// 	height: 100vh;
	// 	position: relative;
	// }

	.content {
		background-color: white;
		width: 100vw;
		min-height: 100vh;
		position: absolute;
		top: 0;
		overflow: auto;

		.mySearch {
			height: 76rpx;
			position: fixed;
			top: 0;
			left: 0;
			background-color: white;
			// background-color: red;
			width: 100%;
			z-index: 99;
			padding: 32rpx;
		}

		//视频列表
		.list {
			padding: 0 32rpx 32rpx;
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;

			.listItem {
				width: 690rpx;
				display: inline-block;
				text-align: left;
				vertical-align: top;
				padding-top: 40rpx;
				margin: 0;

				.coverImg {
					width: 690rpx;
					height: 300rpx;
					border-radius: 12rpx;
				}

				.name {
					width: 690rpx;
					font-size: 30rpx;
					color: #181E27;
					line-height: 36rpx;
					font-weight: bold;
					overflow: hidden;
					/*超出部分隐藏*/
					text-overflow: ellipsis;
					/* 超出部分显示省略号 */
					white-space: nowrap;
					/*规定段落中的文本不进行换行 */
					padding: 10rpx 10rpx 0;
					box-sizing: border-box;
				}

				.num {
					color: #959BA5;
					font-size: 24rpx;
					padding: 10rpx 10rpx 0;
					box-sizing: border-box;
				}
			}

			>i {
				width: 208rpx;
			}
		}
	}
</style>
